import './index.css'
import * as THREE from 'three'
import {
    OrbitControls
} from 'three/examples/jsm/controls/OrbitControls'
import {
    TextGeometry
} from 'three/examples/jsm/geometries/TextGeometry.js';


/**
 * Scene
 */
const scene = new THREE.Scene()
scene.background = new THREE.Color(0x512da8)

/**
 * TextureLoader
 */
const textureLoader = new THREE.TextureLoader()
const matcapTexture = textureLoader.load('../assets/textures/matcaps/9.png')



/**
 * Load  Font
 */
import {
    FontLoader
} from 'three/examples/jsm/loaders/FontLoader'
const fontLoader = new FontLoader()
fontLoader.load('../assets/fonts/Fira Code Medium_Regular.json', (font) => {
    // console.log(font)
    const textGeometry = new TextGeometry("hello three.js world!", {
        font,
        size: 0.5,
        depth: 0.1,
        height: 0.2,
        curveSegments: 12,
        bevelEnabled: true,
        bevelThickness: 0.03,
        bevelSize: 0.02,
        bevelOffset: 0,
        bevelSegments: 5,
    })
    textGeometry.center()

    /**
     * Material
     */

    const material = new THREE.MeshMatcapMaterial()
    material.matcap = matcapTexture
    /**
     * Mesh
     */
    const mesh = new THREE.Mesh(textGeometry, material)
    scene.add(mesh)

    /**
     * BoxHelper
     */
    // const boxHelper = new THREE.BoxHelper(mesh, 0xffff00)
    // scene.add(boxHelper)


    /**
     * Add More 
     */
    const donutGeometry = new THREE.TorusGeometry(0.3, 0.2, 20, 45)
    const boxGeometry = new THREE.BoxGeometry(0.3, 0.3, 0.3)

    for (let i = 0; i < 100; i++) {
        let mesh;
        if (i % 10 <= 2) {
            mesh = new THREE.Mesh(boxGeometry, material)
        } else {
            mesh = new THREE.Mesh(donutGeometry, material)
        }
        mesh.position.set(
            (Math.random() - 0.5) * 10,
            (Math.random() - 0.5) * 10,
            (Math.random() - 0.5) * 10,
        )
        mesh.setRotationFromEuler(
            new THREE.Euler(Math.PI * Math.random(), Math.PI * Math.random(), Math.PI * Math.random())
        )

        const radomeScale = Math.random() * 0.5 + 0.5
        mesh.scale.set(radomeScale, radomeScale, radomeScale)

        scene.add(mesh)
    }
})




/**
 * Size
 */
const Size = {
    width: window.innerWidth,
    height: window.innerHeight
}


/**
 * Camera
 */
const camera = new THREE.PerspectiveCamera(75, Size.width / Size.height, 0.1, 100)
camera.position.set(0, 0, 5)



/**
 * Renderer
 */
const canvas = document.querySelector('canvas.webgl')
const renderer = new THREE.WebGLRenderer({
    canvas
})
renderer.setSize(Size.width, Size.height)




/**
 * OrbitControls
 */
const controls = new OrbitControls(camera, canvas)
controls.enableDamping = true



/**
 * Update
 */
const tick = () => {
    controls.update();
    renderer.render(scene, camera)
    requestAnimationFrame(tick)
}
tick()